<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主题河流图：type = themeRiver.html</title>
  <script src="./echarts.js"></script>

  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    let rawData = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0],
      [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0],
      [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1],
      [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0],
      [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0],
      [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0],
      [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0],
      [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0],
      [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0],
      [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7],
      [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0],
      [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12],
      [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5],
      [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1],
      [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8],
      [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1],
      [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17],
      [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8],
      [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0],
      [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1],
      [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]
    ];
    let labels = [
      'The Sea and Cake',
      'Andrew Bird',
      'Laura Veirs',
      'Brian Eno',
      'Christopher Willits',
      'Wilco',
      'Edgar Meyer',
      'B\xc3\xa9la Fleck',
      'Fleet Foxes',
      'Kings of Convenience',
      'Brett Dennen',
      'Psapp',
      'The Bad Plus',
      'Feist',
      'Battles',
      'Avishai Cohen',
      'Rachael Yamagata',
      'Norah Jones',
      'B\xc3\xa9la Fleck and the Flecktones',
      'Joshua Redman'
    ];

    // [[序号，数据值，名称], ....]
    let data = [];
    for (let i = 0; i < rawData.length; i++) {
      for (let j = 0; j < rawData[i].length; j++) {
        let label = labels[i];
        data.push([j, rawData[i][j], label]);
      }
    }
    console.log(data)

    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      singleAxis: { // 必须给单轴坐标线否则报错
        max: 'dataMax', // 自动获取数据中最大的值
      },
      series: [
        {
          type: 'themeRiver',
          data: data,
          coordinateSystem: 'singleAxis', // 坐标线给singleAxis，官方写错了额，给的值是single，
          boundaryGap: ['10%', '10%'],
          label: {
            fontSize: 20,
            show: false,
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: 'red',
          },
          emphasis: {
            itemStyle: {
              opacity: 0.3
            },
          }
        }
      ],
    })
  </script>
</body>

</html>